<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div v-if="works.list != 0">
          <!-- 作品信息 -->
          <div class="al-flex-wrap al-flex-justify-space-between"
               style="height: 100%; width: 100%;">
            <div class="al-box-pretty al-m-top-20px al-hover-shadow"
                 style="width: 470px; "
                 v-for="(item, index) in works.list" :key="index">
              <!--显示作品信息-->
              <div class="al-cursor-pointer">
                <div class="" @click="goPage('/works/detail/' + item.id)">
                  <div class="al-bg-color-light-white2 al-p-10px">
                    {{item.introduction}}
                  </div>

                  <div class="al-m-top-20px al-m-bottom-20px">
                    <DisplayGridImage :data-source="item.images"/>
                  </div>

                </div>

                <!-- 删除按钮 -->
                <div>
                  <el-divider content-position="right">
                    <el-button round
                               type="warning"
                               size="small"
                               @click="deleteWorks(item.id)">删除
                    </el-button>
                  </el-divider>
                </div>
              </div>


            </div>
          </div>

          <!--分页-->
          <div class="al-flex-container-center-h">
            <el-pagination
                    background
                    :page-size="works.pageSize"
                    @next-click="getWorks(works.nextPage)"
                    @prev-click="getWorks(works.prePage)"
                    @current-change="handleCurrentChangeWorks"
                    layout="prev, pager, next"
                    :total="works.total">
            </el-pagination>
          </div>
        </div>

        <div v-else>
          <EmptyTip/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {request} from "../../../util/network/request";
  import DisplayGridImage from "../../../components/public/DisplayGridImage";
  import {WORKS_DELETE_BY_ID, WORKS_GET_BY_USER_ID} from "../../../util/network/api/works/api-works";
  import EmptyTip from "../../../components/public/EmptyTip";

  export default {
    name: "MyWorks",
    components: {EmptyTip, DisplayGridImage},
    data() {
      return {
        uid: this.$route.params.uid,
        works: [],
      }
    },

    mounted() {
      this.getWorks(this.uid, 1);
    },

    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

      handleCurrentChangeWorks(pageNum) {
        this.getWorks(this.uid, pageNum);
      },

      getWorks(uid, pageNo = 1, pageSize = 4) {
        request({
          method: 'get',
          url: WORKS_GET_BY_USER_ID + uid + `?pageNum=${pageNo}&pageSize=${pageSize}`,
        }).then(res => {
          console.log(res);
          this.works = res.data.data;
          // console.log(this.works)
        }).catch(err => {
          console.log(err);
        })
      },

      //删除作品
      deleteWorks(id) {
        let data = {
          worksId: id,
        };

        request({
          url: WORKS_DELETE_BY_ID,
          method: 'post',
          data: this.qsParam(data),

        }).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message.success("删除成功");
            this.getWorks(this.uid, 1);
          } else {
            this.$message.error("删除失败，请稍候再试");
          }
        }).catch(err => {
          console.log(err);
          this.$message.error("服务器开小差了，请稍候再试");
        })
      }
    }
  }
</script>

<style scoped>

</style>
